<template>
  <!-- 金融服务首页 -->
  <div class="layout">
    <div>
      <div id="showDiv">
        <NewBanner :image="bannerList" style="height:500px"></NewBanner>
    </div>
    <!-- 第二块 -->
    <div class="enterprise_box">
      <div class="box_mail">
        <Container title="企业金融服务" @jump="$router.push({ path: '/finance/financeProduct' })">
        <template>
        <div class="content_box">
          <div class="left">
            <img src="@/assets/image/finance/enterprise.png" alt="" />
            <div
              class="t1"
              @click="$router.push({ path: '/finance/financeProduct' })"
            ></div>
            <!-- $router.push({ path: 'financeProductDetailApply' }) -->
            <div
              class="t2"
              @click="detailApply"
            ></div>
          </div>
          <div class="right">
            <div class="item" @click="productBtn(5)">
              <img src="@/assets/image/finance/enterprise1.png" alt="" />
            </div>
            <div class="item" @click="productBtn(4)">
              <img src="@/assets/image/finance/enterprise2.png" alt="" />
            </div>
            <div class="item" @click="productBtn(1)">
              <img src="@/assets/image/finance/enterprise3.png" alt="" />
            </div>
            <div class="item" @click="productBtn(2)">
              <img src="@/assets/image/finance/enterprise4.png" alt="" />
            </div>
            <div class="item" @click="productBtn(3)">
              <img src="@/assets/image/finance/enterprise5.png" alt="" />
            </div>
            <div class="item" @click="productBtn(6)">
              <img src="@/assets/image/finance/enterprise6.png" alt="" />
            </div>
          </div>
        </div>

        </template>
        </Container>
      </div>
    </div>
    <!-- 第三块 -->
    <div class="enterprise_box financing_box">
      <div class="box_mail">
        <Container title="企业融资" @jump="$router.push({ path: '/finance/financeenterprise' })" className="financing">
          <template>
            <div class="content_box">
              <div
                class="item"
                v-for="item in financingList"
                :key="item.companyFinancingId"
                @click="confinanDetail(item.companyFinancingId)"
              >
                <div class="label">
                  <template v-if="!item.companyLogo">
                    {{ item.firstStr }}
                  </template>
                  <img v-else :src="item.companyLogo" />
                </div>
                <div class="content">
                  <div class="textBox">
                    <div class="textLeft">
                      {{ item.financingName || "默认项目" }}
                    </div>
                    <div class="textRight">
                      {{ item.financingIntroduce || "默认简介" }}
                    </div>
                    <div class="textBtn">{{ get_company_industry_text(item.companyIndustryVal) }}</div>
                  </div>
                  <div class="textRig">
                    <div class="textLeft">
                      <div>
                        <span>{{ item.financingMoney }}</span
                        >万
                      </div>
                      <div>{{ getTurnVal(item.financingTurnVal) }}</div>
                    </div>
                    <div class="textRight color">
                      {{ item.financingExpect }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </Container>
      </div>
    </div>
    <!-- 第四块 -->
      <Container className="enterprise_box" title="融资成功案例" @jump="$router.push({ path: '/finance/financeCase' })">
        <template>
          <EnterpriseBox></EnterpriseBox>
        </template>
      </Container>
    </div>
  </div>
</template>
<script>
  import { getDetailedList, getFinancingSuccessList } from '@/common/api/finance'
  import EnterpriseBox from '@/components/enterpriseBox'

import {
  isLogin,
  setLastUrl,
} from "@/utils/util.js";
export default {
  components:{ EnterpriseBox },
  data() {
    return {
      name: "finance",
      financingList: [],
      productList: [],
      typeList: [],
      statusList: [],
      company_industry: [],
      bannerList:[
        {url:require("@/assets/image/finance/finance_bg.png")},
        {url:require("@/assets/image/finance/finance_bg.png")},
        {url:require("@/assets/image/finance/finance_bg.png")},
        {url:require("@/assets/image/finance/finance_bg.png")},
      ]
    };
  },
  activated() {
    this.getDetailedList();
    this.getFinancingSuccessList();
  },
  created() {
    this.gettypeList();
  },
  methods: {
    // 跳转金融申请页
    detailApply(){
      this.$CheckRole('发布融资诉求', () => {
        this.$router.push({
          path: "/finance/financeProductDetailApply"
        });
      })
    },
    // 企业融资列
    async getDetailedList() {
      let { code, data, msg } = await getDetailedList()
      if (code != '200') return this.$message.warning(msg)
      // console.log('1234', data)
      this.financingList = data.financingList;
      
    },
    // 融资成功列表
    async getFinancingSuccessList() {
      let { code, data, msg } = await getFinancingSuccessList()
      if (code != '200') return this.$message.warning(msg)
      this.productList = data.financingList;
    },
    // 金融产品清单 列表指定产品
    productBtn(type) {
      this.$router.push({
        path: "/finance/financeProduct",
        query: {
          type,
        },
      });
    },
    // 企业金融服务 跳转到指定详情页
    confinanDetail(id) {
      let companyFinancingId = id;
      this.$router.push({
        path: "/finance/financeenterpriseDetail",
        query: {
          companyFinancingId,
        },
      });
    },
    // 企业金融服务 跳转到指定详情页
    caseDetail(id) {
      let companyFinancingId = id;
      this.$router.push({
        path: "/finance/financeCaseDetail",
        query: {
          companyFinancingId,
        },
      });
    },
    // 字典查询 政策类别
    async gettypeList() {
      // 调用公共方法中的查询字典表
      this.getDictList(this,`finance_financing_turn,finance_com_financing_status,company_industry`).then(res => {
        //  融资的轮次
        this.typeList = res.finance_financing_turn;
        //  融资状态
        this.statusList = res.finance_com_financing_status;
        this.company_industry = res.company_industry;
      })
    },
  },
  computed: {
    get_company_industry_text() {
      return function(value) {
        const item = this.company_industry.find(e => e.dictValue == value)
        return item ? item.dictLabel : ""
      }
    },
    getTurnVal() {
      return function (data) {
        let turnList = this.typeList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
    getStatusVal() {
      return function (data) {
        let turnList = this.statusList;
        let obj = turnList.find((item) => item.dictValue == data);
        return obj && obj.dictLabel;
      };
    },
  },
};
</script>
<style scoped>
#showDiv {
  height: 500px;
}

.carouselItem {
  background-image: url("~@/assets/image/finance/finance_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
  background-position: center center;
}

::v-deep .el-carousel__indicators .el-carousel__indicator .el-carousel__button {
  background-color: #ffffff;
  height: 12px;
  width: 12px;
  border-radius: 12px;
  opacity: 1;
  border: 1px solid #999999;
}

::v-deep .el-carousel__indicators .is-active .el-carousel__button {
  background-color: #045db9;
}

::v-deep .el-carousel__arrow--left {
  left: 100px;
  display: none;
}

::v-deep .el-carousel__arrow--right {
  right: 100px;
  display: none;
}
::v-deep .el-carousel__container {
  height: 500px;
}
.enterprise_box {
  background-image: url("~@/assets/image/finance/enterprise_dg.png");
  background-repeat: no-repeat;
  background-size: cover;
  /* height: 510px; */
  background-position: center center;
}
.enterprise_box .box_mail {
  width: 1200px;
  margin: 16px auto 0 auto;
}
.enterprise_box .box_mail .title_box {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 30px;
}
.enterprise_box .box_mail .title_box .title {
  flex: 1;
  text-align: center;
  font-size: 32px;
  color: #045db9;
}
.enterprise_box .box_mail .title_box .more {
  margin-top: 10px;
  cursor: pointer;
}
.enterprise_box .box_mail .content_box {
  display: flex;
  justify-content: space-between;
}
.enterprise_box .box_mail .content_box .left {
  width: 279px;
  margin-right: 6px;
  position: relative;
}
.enterprise_box .box_mail .content_box .left .t1 {
  position: absolute;
  /* background: #0071e5; */
  width: 170px;
  height: 80px;
  left: 20px;
  top: 30px;
  cursor: pointer;
}
.enterprise_box .box_mail .content_box .left .t2 {
  position: absolute;
  /* background: #0071e5; */
  width: 160px;
  height: 50px;
  left: 20px;
  top: 160px;
  cursor: pointer;
}
.enterprise_box .box_mail .content_box .right {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}
.enterprise_box .box_mail .content_box .right .item {
  margin-left: 26px;
  cursor: pointer;
}
.financing_box {
  background-image: url("~@/assets/image/finance/financingbg.png");
  height: 666px;
}
.financing_box .box_mail .title_box {
  padding-top: 40px;
}
.financing_box .box_mail .title_box .title {
  color: #ffffff;
}
.financing_box .box_mail .title_box .more {
  color: #ffffff;
  cursor: pointer;
}
.financing_box .box_mail .content_box {
  flex-wrap: wrap;
}
.financing_box .box_mail .content_box .item {
  width: 580px;
  height: 220px;
  background: #ffffff;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  margin-top: 20px;
  cursor: pointer;
}
/* .financing_box .box_mail .content_box .item {
  margin: 0 50px;
} */
.financing_box .box_mail .content_box .label {
  width: 80px;
  height: 80px;
  background: #045db9;
  font-size: 41px;
  font-weight: 700;
  line-height: 80px;
  color: #ffffff;
  border-radius: 50%;
  flex-shrink: 0;
}
.financing_box .box_mail .content_box .label img {
  width: 100%;
  height: 80px;
}
.financing_box .box_mail .content_box .content {
  /* width: 430px; */
  display: flex;
  flex-direction: column;
  text-align: left;
  margin-left: 20px;
  flex: 1;
  overflow: hidden;
}
.financing_box .box_mail .content_box .content .titleBox {
  margin-top: 20px;
  font-size: 14px;
  color: #333;
}
.financing_box .box_mail .content_box .content .textBox {
  display: flex;
  color: #999;
  font-size: 18px;
  flex-direction: column;
  position: relative;
}
.financing_box .box_mail .content_box .content .textBox .textLeft {
  color: #333333;
  font-weight: bold;
  font-size: 24px;
  margin-top: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 95%;
}
.financing_box .box_mail .content_box .content .textBox .textRight {
  color: #999;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 450px;
  margin: 10px 0;
}
.financing_box .textRig {
  flex: 1;
}
/* .financing_box .textRight {
  flex: 1;
}
.textRight div {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
} */
.financing_box .box_mail .content_box .content .textBox .textBtn {
  background: rgba(0, 113, 229, 0.1);
  color: #0071e5;
  padding: 3px 8px;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 14px;
  white-space: nowrap;
}
.financing_box .box_mail .content_box .content .textRig {
  display: flex;
  color: #999;
  justify-content: flex-start;
  margin-top: 20px;
}
.financing_box .box_mail .content_box .content .textRig .textLeft {
  margin-right: 80px;
  flex-shrink: 0;
}
.financing_box
  .box_mail
  .content_box
  .content
  .textRig
  .textLeft
  div:nth-child(1) {
  font-size: 14px;
  color: #ef6c22;
}
.financing_box
  .box_mail
  .content_box
  .content
  .textRig
  .textLeft
  div:nth-child(1)
  span {
  font-size: 40px;
  font-weight: bold;
  margin-right: 8px;
}
.financing_box
  .box_mail
  .content_box
  .content
  .textRig
  .textLeft
  div:nth-child(2) {
  font-size: 14px;
  color: #999;
}
.productList .item .content .textRig .textRight {
  width: 170px;
}
.financing_box
  .box_mail
  .content_box
  .content
  .textRig
  .textRight
  div:nth-child(1) {
  font-size: 14px;
  color: #ef6c22;
  margin-top: 20px;
}
.color {
  font-size: 18px;
  color: #ef6c22;
  margin-top: 20px;
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.financing_box
  .box_mail
  .content_box
  .content
  .textRig
  .textRight
  div:nth-child(1)
  span {
  font-size: 20px;
  font-weight: bold;
  margin-right: 8px;
}
.financing_box
  .box_mail
  .content_box
  .content
  .textRig
  .textRight
  div:nth-child(2) {
  font-size: 14px;
  color: #999;
}
.financing_box .box_mail .content_box .btnBox {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  border-top: 1px solid #eeeeee;
}
.financing_box .box_mail .content_box .btnBox .btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background: #045db9;
  border-radius: 3px;
  color: #ffffff;
  margin-top: 10px;
  margin-right: 20px;
}
.case_box {
  background: none;
  height: 900px;
}
.productList2 {
  justify-content: flex-start !important;
}
.productList {
  flex-wrap: wrap;
  margin-top: 50px;
  background: none;
}
.productList .item {
  width: 366px;
  height: 360px;
  border: 1px solid #eeeeee;
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 4px 6px 5px 0px rgba(0, 19, 39, 0.04);
  cursor: pointer;
}
.productList .item:nth-child(3n+2) {
  margin: 0 50px;
}
.productList .item .label {
  height: 200px;
}
.productList .item .label img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}
.productList .item .content {
  display: flex;
  flex-direction: column;
  text-align: left;
  margin: 20px;
}
.productList .item .content .titleBox {
  margin-top: 30px;
  font-size: 14px;
  color: #333;
}
.productList .item .content .textBox {
  display: flex;
  color: #999;
  font-size: 18px;
  justify-content: space-between;
}
.productList .item .content .textBox .textLeft {
  color: #333333;
  font-weight: bold;
  flex: 1;
  overflow: hidden;
}
.productList .item .content .textBox .textLeft .letext {
  /* width: 270px; */
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.productList .item .content .textBox .textLeft div:last-child {
  font-weight: 400;
}
.productList .item .content .textBox .textRight {
  color: #ef6c22;
  font-weight: bold;
  flex-shrink: 0;
  margin-left: 10px;
}
.productList .item .content .textRig {
  display: flex;
  color: #999;
  justify-content: space-between;
}
.productList .item .content .textRig span:last-child {
  margin-left: 20px;
}
.productList .item .btnBox {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  border-top: 1px solid #eeeeee;
}
.productList .item .btnBox .btn {
  width: 120px;
  height: 40px;
  line-height: 40px;
  background: #045db9;
  border-radius: 3px;
  color: #ffffff;
  margin-top: 10px;
  margin-right: 20px;
}
</style>